<template>
	<view>
		<!-- pages/user/assets/detail/detail.wxml -->
		<!-- 
			用户昵称user_info.nickName、
			转入时间order.update_time
			商品名称order.goods_name,
			序号order.sort_no,
			转入日期order.date,
			发行数量order.goods_sku.total_num,
			发行方show_goods_info.publisher_name,
			藏品id  show_goods_info.nft_key, 
			藏品介绍 order.content,
			发行方介绍show_goods_info.publisher.detail，
			发行时间show_goods_info.create_time
			音频url order.video_url,  
			音频介绍 order.video_content

			1.音频位置挪到最上方
			2.主图不要了，现在顶部的图片显示为音频封面，音频介绍为非必填，封面为必填
			3.藏品信息中的发行方介绍去除
			4.链上转移历史去除
			5.小小卫士的介绍去除
			 -->
		<navbar></navbar>
		<view v-if="order.order_id" class="container">
			<!-- 盲盒未开启 -->
			<template v-if="1 == order.is_blind_box && 0 == order.open_blind_box_status">
				<view :class="'header header--blind' + (blindBox.opened ? ' opened': '')">
					<view class="media-box">
						<view class="media">
							<three :src="show_goods_info.goods_image" v-if="show_goods_info.goods_image.split('.').pop().toLowerCase() == 'glb'"></three>
							<view
								:class="'audio__cover-wrapper' + (blindBox.opening ? ' swing' : '') + (blindBox.opened ? ' opened': '')"
								v-else>
								<image v-if="blindBox.opened" class="audio__cover" :src="order.video_image_url"
									mode="aspectFill">
								</image>
								<image v-else class="audio__cover" :src="show_goods_info.goods_image" mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
					<view :class="'drawing-box' + (blindBox.opened ? ' show' : '')"></view>
					<view :class="'booth' + (blindBox.opened ? ' down' : '')">
						<!-- <view class="goods__share">
							<form @submit="onClickShare">
								<button formType="submit" class="btn-normal dis-flex flex-center">
									<text class="share__icon dy-iconfont icon-share col-f"></text>
								</button>
							</form>
						</view> -->
						<!-- 藏品名称 -->
						<view class="goods-title dis-flex flex-center">
							<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/left5.png"
								mode="">
							</image>
							<text
								class="title col-f f-30 f-bold onelist-hidden--s">{{ show_goods_info.goods_name }}</text>
							<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/left5.png"
								mode="">
							</image>
						</view>
						<view class="m-top40 f-26 dis-flex flex-center">
							<text class="flex-fixed col-9">发行方</text>
							<text class="m-left20 col-f">{{ show_goods_info.publisher_name }}</text>
						</view>
					</view>
				</view>
				<view class="footer-fixed footer-fixed--blind dis-flex flex-y-center">
					<button v-if="blindBox.opened" class="btn-normal btn-open-blind flex-box f-28 col-0"
						hover-class="hover" @tap.stop.prevent="requestData">藏品详情</button>
					<view v-else-if="order.is_sale " class="btn-normal btn-open-blind flex-box f-28 col-0">寄售中</view>
					<view class="dis-flex width100" v-else> 
						<button class="btn-open-blind flex-box f-28 col-0" hover-class="hover"
							@tap.stop.prevent="isPopup">开启盲盒</button>
						<button class="btn-open-blind flex-box f-28 col-0 m-left20" hover-class="hover"
							v-if="(1 == order.can_sale && canIUseTrade) || (1 == order.can_transfer && canIUseGiven) || 0 != order.sale_status.status"
							@tap.stop.prevent="onRequestSaleInfo">我要寄售</button>
					</view>
					
				</view>
			</template>
			<template v-else>
				<view class="header header--normal">
					<view class="media-box">
						<!-- 非音频支持3D -->
						<!-- <threed-image v-if="canIUse3D && 0 == order.video_id" :img-url="order.video_image_url"></threed-image> -->
						<three :src="order.goods_image" v-if="order.goods_image.split('.').pop().toLowerCase() == 'glb'"></three>
						<view v-else class="media">
							<view class="audio__cover-wrapper">
								<image class="audio__cover" :src="order.goods_image" @load="audioCoverLoaded"
									mode="aspectFill">
								</image>
							</view>
							<view v-if="0 < order.video_id && audio.coverLoaded"
								class="audio-player dis-flex flex-y-center">
								<view class="audio-play-btn-wrapper flex-fixed" @tap.stop.prevent="playAudio">
									<image v-if="!audio.playing" class="audio-play-btn"
										src="https://imgcdn.ecbao.cn/nft/audio_play.png">
									</image>
									<image v-else class="audio-play-btn"
										src="https://imgcdn.ecbao.cn/nft/audio_pause.png"></image>
								</view>
								<view class="audio-current-time col-f f-28">{{ audio.currentTime }}</view>
								<view class="audio-slider-wrapper flex-box">
									<slider class="audio-slider" :value="slider.value"
										backgroundColor="rgba(199, 166, 118, 0.55)" activeColor="#ffffff"
										block-size="12" @change="sliderValueChanged" @changing="sliderValueChanging">
									</slider>
								</view>
								<view class="audio-duration col-f f-28">{{ audio.duration }}</view>
							</view>
						</view>
					</view>
					<!-- 底盘隐藏 -->
					<view  v-if="false" class="booth">
						<view class="goods__share">
							<form @submit="onClickPreview">
								<button formType="submit" class="btn-normal dis-flex flex-center">
									<text class="share__icon dy-iconfont icon-fangda1 col-f"></text>
								</button>
							</form>
						</view>
						<!-- 藏品名称 -->
						<view class="dis-flex flex-center f-28">
							<text class="col-6">由</text>
							<text class="m-left10 f-30 col-f">{{ user_info.nickName }}</text>
							<text class="m-left10 col-6">拥有</text>
						</view>
						<view class="goods-title m-top10 dis-flex flex-center">
							<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/left5.png"
								mode="">
							</image>
							<text
								class="title col-f f-30 f-bold onelist-hidden--s">{{ order.goods_sku.spec_value }}</text>
							<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/right5.png"
								mode="">
							</image>
						</view>
						<view v-if="2 == order.goods_type" class="assets__no-wrapper m-top20">
							<view class="assets__no">
								<text
									v-if="1 == order.sort_no_status && order.sort_no !== '--'">NO.{{ order.sort_no }}</text>
								<text v-else>生成中</text>
							</view>
						</view>
					</view>
				</view>
				<view class="content b-f">
					<!-- 藏品标题信息 -->
					<view class="title-box">
						<view class="top">
							<view class="price">
								￥<span>{{ show_goods_info.min_goods_price }}</span>
							</view>
						</view>
						<view class="bottom">
							<view class="title">
								{{ show_goods_info.goods_name}}
							</view>
							<view></view>
							<view class="flex">
								<view class="tag-box">
									<span class="tag-title">限量</span>
									<span class="tag-num">{{ show_goods_info.show_total_stock_num }}</span>
								</view>
								<view class="tag-box">
									<span class="tag-title">流通</span>
									<span class="tag-num">{{ show_goods_info.market_num }}</span>
								</view>
							</view>
						</view>
					</view>
					<!-- 发行方 持有者 -->
					<view class="content-component">
						<view class="introduction">
							<view class="introduction-item">
								<view class="title">发行方</view>
								<view class="info">
									<image class="info-img" :src="show_goods_info.publisher.logo"></image>
									<view class="info-name">{{ show_goods_info.publisher_name }}</view>
								</view>
							</view>
							<view class="introduction-item">
								<view class="title">持有者</view>
								<view class="info">
									<image class="info-img" :src="user_info.avatarUrl"></image>
									<view class="info-name">{{ user_info.nickName }}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 技术信息，数字藏品才有 -->
					<view v-if="2 == order.goods_type" class="content-component f-28">
						<view class="component-title">技术信息</view>
						<view class="component-content">
							<view class="dis-flex word-break">
								<view class="content-key col-9">数字藏品ID</view>
								<view class="content-value">
									{{ show_goods_info.nft_key && show_goods_info.nft_key != 0 ? show_goods_info.nft_key : '生成中' }}
								</view>
							</view>
							<view class="m-top20 dis-flex word-break">
								<view class="content-key col-9">藏品哈希值</view>
								<view class="content-value">{{ order.order_tx_id }}</view>
							</view>
							<view v-if="order.nft_chain" class="m-top20 dis-flex flex-y-center">
								<view class="content-key col-9">所属链</view>
								<view class="content-value">{{ order.nft_chain }}</view>
							</view>
						</view>
					</view>

					<!-- 藏品信息 -->
					<view class="content-component f-28">
						<view class="component-title">藏品信息</view>
						<view class="component-content">
							<view class="dis-flex">
								<view v-if="2 == order.goods_type" class="content-key col-9">转入时间</view>
								<view v-else class="content-key col-9">获取时间</view>
								<view class="content-value">{{ utils.switchDate(order) }}</view>
							</view>
							<view v-if="2 == order.goods_type" class="m-top20 dis-flex">
								<view class="content-key col-9">发行数量</view>
								<view class="content-value">{{ order.goods_sku.total_num }}</view>
							</view>
							<view class="m-top20 dis-flex">
								<view class="content-key col-9">发行方</view>
								<view class="content-value">{{ show_goods_info.publisher_name }}</view>
							</view>
							<view v-if="2 == order.goods_type" class="m-top20 dis-flex">
								<view class="content-key col-9">流通数</view>
								<view class="content-value">{{ show_goods_info.market_num }}</view>
							</view>
							<view class="m-top20">
								<view class="content-key col-9">藏品说明</view>
								<view class="dy-lineheight">
									<mp-html :content="article_nft_intro"></mp-html>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="order.is_frozen">
					<view style="height: 60px;"></view>
					<view class="footer-fixed">
						<button class="btn-normal btn-sale flex-box f-28 col-m">{{order.frozen_time}}</button>
						<!-- <button class="btn-normal btn-sale flex-box f-28 col-m">冻结至{{order.frozen_time}}</button> -->
					</view>
				</view>
				
				<template
					v-if="(1 == order.can_sale && canIUseTrade) || (1 == order.can_transfer && canIUseGiven) || 0 != order.sale_status.status">
					<bottom-placeholder></bottom-placeholder>
					<view v-if="shouldOpenAccount" class="perfect-tips-placeholder"></view>
					<view class="footer-fixed">
						<view v-if="shouldOpenAccount" class="perfect-tips">
						  <view class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28" @click="onOpenAccount">
							<view class="perfect-tips__title col-f"><text class="m-right10">*</text>寄售藏品需先开户，请前往操作</view>
							<view class="btn-perfect dis-flex flex-y-center">
							  <text>去开户</text>
							  <text class="dy-iconfont icon-youjiantou f-36"></text>
							</view>
						  </view>
						</view>
						<view class="dis-flex" v-if="!order.is_frozen">
							<button v-if="1 == order.can_transfer && canIUseGiven"
								class="btn-normal btn-given flex-box f-28" hover-class="hover"
								@tap.stop.prevent="onToggleGivenAssetsAlert">转赠</button>
							<button v-if="1 == order.can_sale && canIUseTrade"
								class="btn-normal btn-sale flex-box f-28 col-m" hover-class="hover"
								@tap.stop.prevent="onRequestSaleInfo">寄售</button>
							
							<!-- <button v-if="1 == order.can_transfer && canIUseGiven"
								class="btn-normal btn-given flex-box f-28" hover-class="hover"
								@tap.stop.prevent="onToggleGivenAssetsAlert">转赠他人</button> -->
								
							<view v-if="0 != order.sale_status.status" class="btn-normal btn-sale flex-box f-28 col-m">
								{{ order.sale_status.text }}
							</view>
							
						</view>
					</view>
				</template>
				<!-- <view class="btn-share dis-flex flex-dir-column flex-center" @tap.stop.prevent="showPoster">
					<view class="dy-iconfont icon-fenxiang"></view>
					<view class="f-24">分享</view>
				</view> -->
			</template>
		</view>

		<!-- 分享海报 弹出层 -->
		<share-poster v-model="share.showPopup" :id="order_id" type="order"></share-poster>

		<!-- 转赠弹窗 -->
		<alert :show="givenAssets.showAlert">
			<view class="given-alert">
				<view class="given-alert-container">
					<view class="assets-info dis-flex flex-y-center">
						<image class="assets__img flex-fixed" :src="show_goods_info.goods_image" mode=""></image>
						<view class="m-left30">
							<view class="assets__name onelist-hidden--s f-30 col-f">{{ show_goods_info.goods_name }}
							</view>
							<view class="assets__no-wrapper">
								<view class="assets__no">
									<text
										v-if="1 == order.sort_no_status && order.sort_no !== '--'">NO.{{ order.sort_no }}</text>
									<text v-else>生成中</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="m-top20 col-9 f-24"><text class="dy-iconfont icon--tishi"> </text>该藏品转赠次数为<text
							class="col-m">{{ order.transfer_total_num }}</text>次，剩余<text
							class="col-m">{{ order.transfer_surplus_num }}</text>次
					</view> -->
					<view class="search-area">
						<view class="input-wrapper m-top50">
							<input type="number" class="col-3 f-24" v-model="givenAssets.phoneNumber"
								placeholder="请输入手机号" />
							<button type="default" class="btn-search btn-normal"
								@tap.stop.prevent="searchUser">查找</button>
						</view>
						<view v-if="givenAssets.user" class="user dis-flex flex-y-center m-top50">
							<view class="user__avatar">
								<image :src="givenAssets.user.avatarUrl" mode=""></image>
							</view>
							<view class="user-info">
								<view class="username f-28 col-3">{{ givenAssets.user.nickName }}</view>
								<view class="user__phone m-top10 f-24 col-9">手机号：{{ givenAssets.user.phone }}</view>
							</view>
						</view>
						<button type="default" class="btn-normal btn-given" :disabled="!givenAssets.user"
							@tap.stop.prevent="onGivenAssets">确认转赠
							<text v-if="order.show_money && 0 < order.transfer_money" class="fee">手续费￥{{ order.transfer_money }}</text>
						</button>
						<view v-if="givenAssets.canIUseAgreement" class="given-agreement">
							<label class="f-24 dis-flex flex-center" @tap.stop.prevent="onToggleCheckAgreement">
								<text v-if="!givenAssets.agreementChecked" class="dy-iconfont icon-weigouxuan"></text>
								<text v-else class="dy-iconfont icon-gouxuan" style="color:#000;"></text>
								<text class="m-left10 col-9">我已阅读并勾选<text class="col-m"
										@tap.stop.prevent="showGivenAgreement">《转赠协议》</text></text>
							</label>
						</view>
					</view>
				</view>
				<!-- 关闭按钮 -->
				<view class="btn-close" @tap.stop.prevent="onToggleGivenAssetsAlert">
					<text class="dy-iconfont icon--cha"></text>
				</view>
			</view>
		</alert>
		<!-- 转赠成功弹窗 -->
		<alert :show="givenAssets.showSuccessAlert">
			<view class="given-alert given-success-alert">
				<view class="given-alert-container">
					<view class="img-success">
						<text class="dy-iconfont icon-gou"></text>
					</view>
					<view class="given-success-alert-title">已转赠，待对方领取</view>
					<view class="assets-info dis-flex flex-y-center">
						<image class="assets__img flex-fixed" :src="show_goods_info.goods_image" mode=""></image>
						<view class="m-left30">
							<view class="assets__name onelist-hidden--s f-30 col-f">{{ show_goods_info.goods_name }}
							</view>
							<view class="assets__no-wrapper">
								<view class="assets__no">
									<text
										v-if="1 == order.sort_no_status && order.sort_no !== '--'">NO.{{ order.sort_no }}</text>
									<text v-else>生成中</text>
								</view>
							</view>
						</view>
					</view>
					<view class="given-user-info-wrapper">
						<view class="given-user-info">赠予信息</view>
					</view>
					<view v-if="givenAssets.user" class="user__avatar">
						<image :src="givenAssets.user.avatarUrl" mode=""></image>
					</view>
					<view v-if="givenAssets.user" class="username m-top30 col-3 f-28">{{ givenAssets.user.nickName }}
					</view>
				</view>
			</view>
		</alert>
		<security-password :show="securityPassword.show" :target="securityPassword.target"
			@close="onToggleSecurityPassword" @success="onSecurityPasswordSuccess">
		</security-password>
		<input-alert :show="inputAlert.show" title="请输入验证码" placeholder="验证码" :params="inputAlert.params"
			@cancel="onInputAlertCancel" @confirm="onInputAlertConfirm"></input-alert>
		<!-- 寄售弹窗 -->
		<alert :show="sale.showAlert">
			<view class="given-alert sale-alert">
				<view class="given-alert-container">
					<view class="assets-info dis-flex flex-y-center">
						<image class="assets__img flex-fixed" :src="sale.info.goods_image" mode=""></image>
						<view class="m-left30">
							<view class="assets__name onelist-hidden--s f-30 col-f">{{ sale.info.goods_name }}
							</view>
							<view class="assets__no-wrapper" v-if="order.sort_no">
								<view class="assets__no">
									<text
										v-if="1 == order.sort_no_status && order.sort_no !== '--'">NO.{{ order.sort_no }}</text>
									<text v-else>生成中</text>
								</view>
							</view>
						</view>
					</view>
					<view class="m-top40 f-26">购买价格：<text class="col-m f-30">¥{{ sale.info.pay_price }}</text></view>
					<view class="m-top40 dis-flex">
						<view class="sale-price-title flex-fixed f-26">寄售价格：</view>
						<view class="flex-box">
							<view class="input-wrapper dis-flex flex-y-center">
								<text class="f-26">¥</text>
								<input type="digit" class="flex-box col-3 f-26" v-model.number="sale.price"
									placeholder="请输入寄售价格,只能输入整数"
									/>
							</view>
							<view class="m-top20 col-6 f-22">
								<!-- 服务费：手续费{{ sale.info.service_rate }}%，版税{{ sale.info.royalty_rate }}%</view> -->
								手续费：{{ sale.info.service_rate }}% 最小手续费为0.5元</view>
							<view v-if="0 < sale.price" class="m-top10 col-6 f-22">预计此次出售实际可得<text
									class="col-m">¥{{ sale.price-(sale.price * (1 - (sale.info.service_rate + sale.info.royalty_rate) * 0.01)).toFixed(2) < 0.5 ? (sale.price-0.5):(sale.price * (1 - (sale.info.service_rate + sale.info.royalty_rate) * 0.01)).toFixed(2) }}</text>元
							</view>
							<view v-else class="m-top10 col-6 f-22">预计此次出售实际可得<text class="col-m">-</text>元</view>
						</view>
					</view>
					<button type="default" class="btn-normal btn-given" :disabled="0 == sale.price"
						@tap.stop.prevent="onSaleAssets">确认寄售
					</button>
					<view v-if="sale.canIUseAgreement" class="given-agreement">
						<label class="f-24 dis-flex flex-center"
							@tap.stop.prevent="sale.agreementChecked = !sale.agreementChecked">
							<text v-if="!sale.agreementChecked" class="dy-iconfont icon-weigouxuan"></text>
							<text v-else class="dy-iconfont icon-gouxuan" style="color:#000;"></text>
							<text class="m-left10 col-9">我已阅读并勾选<text class="col-m"
									@tap.stop.prevent="showSaleAgreement">《寄售协议》</text></text>
						</label>
					</view>
				</view>
				<!-- 关闭按钮 -->
				<view class="btn-close" @tap.stop.prevent="sale.showAlert = !sale.showAlert">
					<text class="dy-iconfont icon--cha"></text>
				</view>
			</view>
		</alert>
		<!-- 寄售成功弹窗 -->
		<alert :show="sale.showSuccessAlert">
			<view class="given-alert given-success-alert sale-success-alert">
				<view class="given-alert-container">
					<view class="img-success">
						<text class="dy-iconfont icon-gou"></text>
					</view>
					<view class="given-success-alert-title">寄售成功</view>
					<view class="assets-info dis-flex flex-y-center">
						<image class="assets__img flex-fixed" :src="sale.info.goods_image" mode=""></image>
						<view class="m-left30">
							<view class="assets__name onelist-hidden--s f-30 col-f">{{ sale.info.goods_name }}
							</view>
							<view class="assets__no-wrapper">
								<view class="assets__no">
									<text
										v-if="1 == order.sort_no_status && order.sort_no !== '--'">NO.{{ order.sort_no }}</text>
									<text v-else>生成中</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</alert>
		<pay-popup :show="showPayPopup" @close="onTogglePayPopup" @selectpaytype="onSelectPayType"></pay-popup>
		<view class="zz" v-show="isdetermine">
			<view class="popup">
				<view class="title">
					是否开启盲盒？
				</view>
				<view class="btn" style="border-top:1rpx solid #dfdfdf;height: 100rpx;text-align: center;line-height: 100rpx;">
					<view @click="isdetermine = false" style="width: 295rpx;height: 100%;border-right: 1rpx solid #dfdfdf;">取消</view>
					<view @click="onOpenBlindBox" style="width: 300rpx;height: 100%;color: #007aff;">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script module="utils" lang="wxs">
	var switchDate = function(order) {
		if (1 == order.sort_no_status) {
			var createDate = getDate(order.create_time);
			var publishDate = getDate('2021-10-21 00:00:00');
			if (createDate > publishDate) {
				return order.create_time;
			}
			return order.update_time;
		}
		return order.update_time_value;
	}
	module.exports = {
		switchDate: switchDate
	}
</script>
<script>
	import navbar from "@/components/navbar/navbar";
	import sharePoster from "@/components/poster/sharePoster"
	import three from "@/components/three/index";
	import {
		canIUseGiven,
		canIUseTrade,
		canIUse3D
	} from "@/module.js";
	import alert from "@/components/alert/index.vue";
	import bottomPlaceholder from '@/components/bottom-placeholder/index';
	import payTypeEnum from '@/utils/enum/PayType';
	import paymentUtils from '@/utils/paymentUtils.js';
	// pages/user/assets/detail/detail.js
	const app = getApp(); // 富文本插件
	import {
		isEmpty,
		isPhone
	} from "@/utils/verify.js";

	export default {
		components: {
			navbar,
			sharePoster,
			alert,
			bottomPlaceholder,
			three
		},
		data() {
			return {
				canIUseTrade: canIUseTrade,
				canIUseGiven: canIUseGiven,
				canIUse3D: canIUse3D,
				audio: {
					duration: '--:--',
					currentTime: '00:00',
					playing: false,
					coverLoaded: false
				},

				slider: {
					value: 0,
					dragging: false // 拖动进度条

				},

				// 分享海报
				share: {
					showPopup: false
				},

				order: {
					order_id: "",
					video_image_url: "",
					video_id: 0,

					goods_sku: {
						spec_value: "",
						total_num: ""
					},

					goods_type: 0,
					sort_no_status: 0,
					sort_no: ""
				},

				user_info: {
					nickName: ""
				},

				show_goods_info: {
					publisher_name: "",
					nft_key: false,
					order_tx_id: ''
				},

				article_nft_intro: "",
				givenAssets: {
					showAlert: false,
					phoneNumber: '',
					user: null,
					showSuccessAlert: false,
					canIUseAgreement: true,
					agreementChecked: false,
					transfer_log_id: 0, // 赠予id
					pay_type: 0,
				},
				blindBox: { // 盲盒开启的状态
					opening: false,
					opened: false
				},
				sale: {
					showAlert: false,
					info: {},
					price: '',
					showSuccessAlert: false,
					canIUseAgreement: true,
					agreementChecked: false,
				},
				showPayPopup: false,
				securityPassword: {
					show: false,
					target: '',
				},
				is_open_sande: false,
				is_open_lianlian: false,
				
				inputAlert: {
					show: false,
					params: null,
				},
				isdetermine:false//盲盒二次确认
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData(options);
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
		  this.requestData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			if (this.innerAudioContext) {
				this.innerAudioContext.offPlay();
				this.innerAudioContext.offPause();
				this.innerAudioContext.offEnded();
				this.innerAudioContext.offTimeUpdate();
				this.innerAudioContext.offCanplay();
				this.innerAudioContext.offError();
				this.innerAudioContext.destroy();
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		computed: {
			shouldOpenAccount: function () {
				return 1 == this.order.can_sale && this.canIUseTrade && !this.is_open_sande && !this.is_open_lianlian;
			}
		},
		methods: {
			//盲盒二次确认
			isPopup(){
				this.isdetermine = !this.isdetermine
			},
			//////// private methods ////////
			initAudio: function() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.src = this.order.video_url; // 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放

				innerAudioContext.onCanplay(() => {
					function getDuration() {
						return innerAudioContext.duration;
					}

					let duration = getDuration();

					if (0 == duration) {
						let interval = setInterval(() => {
							let duration = getDuration();

							if (0 < duration) {
								clearInterval(interval);
								this.setData({
									"audio.duration": this.formatSeconds(duration)
								});
							}
						}, 200);
					}
				});
				innerAudioContext.onPlay(() => {
					this.setData({
						"audio.playing": true,
						"audio.duration": this.formatSeconds(innerAudioContext.duration)
					});
				});
				innerAudioContext.onPause(() => {
					this.setData({
						"audio.playing": false
					});
				});
				innerAudioContext.onEnded(() => {
					this.setData({
						"audio.playing": false,
						"audio.currentTime": '00:00',
						"slider.value": 0
					});
					innerAudioContext.startTime = 0;
				});
				innerAudioContext.onTimeUpdate(() => {
					const {
						currentTime,
						duration
					} = innerAudioContext;
					this.setData({
						"audio.currentTime": this.formatSeconds(currentTime)
					});

					if (!this.slider.dragging) {
						this.setData({
							"slider.value": currentTime / duration * 100
						});
					}
				});
				innerAudioContext.onError(res => {
					app.showError(res.errMsg);
				});
				this.innerAudioContext = innerAudioContext;
			},

			// 将秒转化为时分秒
			formatSeconds(endTime) {
				let secondTime = parseInt(endTime); //将传入的秒的值转化为Number

				let min = 0; // 初始化分

				let h = 0; // 初始化小时

				let result = '';

				if (secondTime > 60) {
					//如果秒数大于60，将秒数转换成整数
					min = parseInt(secondTime / 60); //获取分钟，除以60取整数，得到整数分钟

					secondTime = parseInt(secondTime % 60); //获取秒数，秒数取佘，得到整数秒数

					if (min > 60) {
						//如果分钟大于60，将分钟转换成小时
						h = parseInt(min / 60); //获取小时，获取分钟除以60，得到整数小时

						min = parseInt(min % 60); //获取小时后取佘的分，获取分钟除以60取佘的分
					}
				}

				if (h > 0) {
					result += `${h.toString()}:`;
				}

				result += `${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
				return result;
			},

			playAudio: function() {
				let paused = this.innerAudioContext.paused;

				if (!paused) {
					// 正在播放
					this.innerAudioContext.pause();
				} else {
					// 暂停或停止状态
					this.innerAudioContext.play();
				}
			},

			// 完成一次拖动后触发的事件
			sliderValueChanged: function(e) {
				this.setData({
					"slider.dragging": false
				});
				this.innerAudioContext.seek(e.detail.value / 100 * this.innerAudioContext.duration);
			},

			// 拖动过程中触发的事件
			sliderValueChanging: function(e) {
				if (!this.slider.dragging) {
					this.setData({
						"slider.dragging": true
					});
				}
			},

			audioCoverLoaded: function() {
				this.setData({
					"audio.coverLoaded": true
				});
			},

			//////// 分享海报 ////////
			/**
			 * 显示商品海报图
			 */
			showPoster() {

				let canShare = this.order.can_share;

				if (!canShare) {
					app.showError('生成中，暂无法分享');
				} else {
					this.setData({
						"share.showPopup": true
					});
				}
			},

			//////// networking ////////
			requestData: function() {
				uni.showLoading();

				app._get('user.order/detail/', {
					order_id: this.order_id
				}, res => {
					if (1 == res.code) {
						let {
							order
						} = res.data; // 富文本转码

						if (0 < order.content.length) {
							this.article_nft_intro = this.escape2Html(order.content);
						}

						this.setData(res.data);
						app.configJweixin({
							desc: '超多藏品等你来开启～',
							imgUrl: this.order.goods_image
						});
						if (0 < order.video_id) {
							// 是音频
							this.initAudio();
						}
					}
				}, null, () => {
					uni.hideLoading();
				});
			},

			// 切换转赠弹窗
			onToggleGivenAssetsAlert: function(e) {
				this.givenAssets.showAlert = !this.givenAssets.showAlert;
			},
			// 切换转赠成功弹窗
			onToggleGivenAssetsSuccessAlert: function(e) {
				this.givenAssets.showSuccessAlert = !this.givenAssets.showSuccessAlert;
			},
			// 勾选转赠协议
			onToggleCheckAgreement: function(e) {
				this.givenAssets.agreementChecked = !this.givenAssets.agreementChecked;
			},
			// 查看协议
			showSaleAgreement: function(e) {
				uni.navigateTo({
					url: '../agreement/agreement?type=sale'
				})
			},
			showGivenAgreement: function() {
				uni.navigateTo({
					url: '../agreement/agreement?type=given'
				})
			},
			// 查找人
			searchUser: function(e) {
				// console.log((this.givenAssets.phoneNumber));
				if (isEmpty(this.givenAssets.phoneNumber)) {
					app.showError('手机号不能为空');
				} else if (!isPhone(this.givenAssets.phoneNumber)) {
					app.showError('请输入正确的手机号');
				} else {
					uni.showLoading();
					app._get('user/userInfoByPhone', {
						phone: this.givenAssets.phoneNumber
					}, (res) => {
						if (1 == res.code) {
							this.givenAssets.user = res.data;
						}
					}, null, () => {
						uni.hideLoading();
					});
				}
			},

			// 发起转赠请求
			requestTransfer: function() {
				uni.showLoading();
				// app._post_form('transfer/transferorder', {
				app._post_form('transfer/userTransferOrder', {
					order_id: this.order_id,
					to_user_id: this.givenAssets.user.user_id
				}, (res) => {
					if (1 == res.code) {
						let {
							transfer_log_id,
							need_pay, // 1-需要支付，2-不需要支付
						} = res.data;
						this.givenAssets.showAlert = false;
						this.givenAssets.transfer_log_id = transfer_log_id;
						if (1 == need_pay) {
							this.onTogglePayPopup();
						} else {
							this.givenSuccess();
						}
					}
				}, null, () => {
					uni.hideLoading();
				});
			},

			// 点击转赠按钮
			onGivenAssets: function(e) {
				if (this.givenAssets.canIUseAgreement && !this.givenAssets.agreementChecked) {
					app.showError('请先阅读并勾选《转赠协议》');
				} else {
					// 输入安全密码
					this.securityPassword.target = 'given';
					this.onToggleSecurityPassword();
				}
			},
			//////// 安全密码回调 ////////
			// 切换安全密码弹窗的显示
			onToggleSecurityPassword: function() {
				this.securityPassword.show = !this.securityPassword.show;
			},
			// 密码输入正确
			onSecurityPasswordSuccess: function(target) {
				if (target == 'given') {
					//  转赠
					this.requestTransfer();
				} else if (target == 'sale') {
					// 寄售
					this.requestSaleOrder();
				} else if (target == 'pay') {
					// 余额支付
					this.requestPayTransferOrder();
				}
			},
			//////// 输入框弹窗回调 ////////
			onInputAlertCancel: function() {
				this.onToggleInputAlert();
			},
			onInputAlertConfirm: function(value, target, params) {
				this.requestValidationSms(value, params);
			},
			// 校验验证码
			requestValidationSms: function(verify_code, params) {
				paymentUtils.requestLLBalancePay(verify_code, params, (res)=> {
					// 支付成功
					this.onToggleInputAlert();
					this.givenSuccess();
				});
			},
			onToggleInputAlert: function() {
				this.inputAlert.show = !this.inputAlert.show;
			},
			// 查看大图
			onClickPreview: function(e) {
				uni.previewImage({
					current: this.order.video_image_url,
					urls: [this.order.video_image_url]
				})
			},
			// 开盲盒
			onOpenBlindBox: function(e) {
				this.isdetermine = false
				let _this = this
				app._get('user.order/openBlindBox', {
					order_id: this.order_id
				}, (res) => {
					this.blindBox.opening = true;
					setTimeout(() => {
						this.blindBox.opening = false;
						this.blindBox.opened = true;
						_this.requestData()
					}, 800);
				});
			},
			// 请求寄售信息
			onRequestSaleInfo: function() {
				if (this.shouldOpenAccount) {
					app.showError('寄售藏品需先开户');
				} else {
					uni.showLoading();
					app._get('ordersale/showOrderInfo', {
						order_id: this.order_id
					}, (res) => {
						this.sale.info = res.data;
						this.sale.showAlert = true;
					}, null, () => {
						uni.hideLoading();
					})	
				}
			},
			//  点击寄售按钮
			onSaleAssets: function(e) {
				if(this.sale.price%1 !==0){
					uni.showToast({
						title: '请输入整数',
						icon: 'none'
					})
					return
				}
				if (this.sale.canIUseAgreement && !this.sale.agreementChecked) {
					app.showError('请先阅读并勾选《寄售协议》');
				} else {
					// 输入安全密码
					this.securityPassword.target = 'sale';
					this.onToggleSecurityPassword();
				}
			},
			// 发起寄售请求
			requestSaleOrder: function() {
				if(this.sale.price>99999){
					uni.showToast({
						title: '寄售金额不可大于99999元',
						icon: 'none'
					})
					return
				}
				if(this.sale.price<1){
					uni.showToast({
						title: '寄售金额不可小于1元',
						icon: 'none'
					})
					return
				}
				uni.showLoading();
				app._post_form('Ordersale/addSaleOrder', {
					order_id: this.order_id,
					sale_price: this.sale.price
				}, (res) => {
					this.saleSuccess();
				}, null, () => {
					uni.hideLoading();
				})
			},
			// 寄售成功，跳转到我的藏品
			saleSuccess: function() {
				this.sale.showAlert = false;
				this.sale.showSuccessAlert = true;
				setTimeout(() => {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('someEvent', {data: 'data from test page'});
					uni.navigateBack({
						delta: 1
					})
				}, 500);
			},
			onTogglePayPopup: function() {
				this.showPayPopup = !this.showPayPopup;
			},
			onSelectPayType: function(value) {
				this.onTogglePayPopup();
				this.givenAssets.pay_type = value;
				if (PayTypeEnum.BALANCE == value || PayTypeEnum.LL_BALANCE == value) {
					// 余额支付时需输入安全密码
					this.securityPassword.target = 'pay';
					this.onToggleSecurityPassword();
				} else {
					this.requestPayTransferOrder();
				}
			},
			requestPayTransferOrder: function() {
				uni.showLoading({
					title: '正在处理...'
				});
				paymentUtils.request('transfer/payTransferOrder', {
					transfer_log_id: this.givenAssets.transfer_log_id,
					pay_type: this.givenAssets.pay_type
				}, () => {
				  // 支付成功
					this.givenSuccess();
				}, (msg) => {
				  // 支付失败
					app.showError(msg);
					this.redirectToGivenManagement();
				}, null, (data) => {
					// 请求成功，特殊处理连连余额支付逻辑
					let {
						pay_type,
						payment,
					} = data;
					if (pay_type == PayTypeEnum.LL_BALANCE && '8888' == payment.ret_code) {
						this.inputAlert.params = payment;
						this.onToggleInputAlert();
					}
				}, () => {
				  // 请求完成
					uni.hideLoading();
				})
			},
			// 转赠成功
			givenSuccess: function() {
				this.givenAssets.showSuccessAlert = true;
				setTimeout(() => {
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('someEvent')
					uni.navigateBack({
						delta: 1
					})
				}, 500);
			},
			// 跳转到赠与管理
			redirectToGivenManagement: function() {
				uni.redirectTo({
					url: '/pages/user/given/index/index'
				});
			},
			// 请求开户
			onOpenAccount: function() {
				uni.navigateTo({
					url: '/pages/user/account/account'
				})
				// app._post_form('user/getSanDeWallet', {}, function(result) {
				// 	console.log(result)
				// 	if (1 == result.code) {
				// 		app.navigationTo(result.data.pay_url)
				// 	}else{
				// 		app.showError(result.msg);
				// 	}
				// }, null, function() {
				// 	// 解除按钮禁用
				// 	app.showError(result.msg);
				// });
				// app._get('user/openacct', null, (res) => {
				// 	if (1 == res.code) {
				// 		app.navigationTo(res.data.gateway_url);
				// 	}
				// });
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import './detail.scss';
	@import '../../../../utils/assets.scss';
	.zz{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 14;
		  background: rgba(0, 0, 0, 0.5);
		  display: flex;
		  justify-content: space-around;
		  align-items: center;
		  z-index: 11;
		  .popup{
			  border-radius: 20rpx;
			  width: 500rpx;
			  height: 250rpx;
			  background-color: #fff;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  .title{
				  margin-top: 50rpx;
				  text-align: center;
				  height: 80rpx;
				  line-height: 80rpx;
				  // border-bottom: 1rpx solid #999;
			  }
			  .btn{
				  display: flex;
			  }
		  }
	}
</style>
